Web Vitals

user-centric metrics

LCP (Largest Contentful Paint)

Largest Contentful Paint marks the time at which the largest text or image is painted.

LCPとは最も大きいtext或いは畫像が表示される迄の時閒を謂ふ

first view 內の最も大きな要素が表示される迄の時閒

重要な要素を、機械的に測る爲に最大の要素で近似してゐるものと思はれる

YouTubeの動畫の枠とか

< 2.5 sec

FID (First Input Delay)

最初に操作できるようになるまでの時閒

ページにアクセスしてからユーザ入力を受け付けるまで

ユーザ入力: ボタンを押す / input要素のフォーカスを當てる / スクロールする / ...

これが長ければ長いほど、ユーザがページを操作・巡囘できなくなってしまう

< 100 msec

CLS (Cumulative Layout Shift)

Cumulative Layout Shift measures the movement of visible elements within the viewport.

CLSとはviewportの中に見えている要素がどれ程動くか測ったものである

ガタツキがどれくらいを表す指標

表示されたものをガタガタ動かすな

https://storage.googleapis.com/web-dev-assets/layout-instability-api/layout-instability2.webm

ガタツキの幅が大きければ大きな値になる

ガタツキの發生が多いほど大きな値になる (累計)

< 0.1 score

畫像に依る layout shift を細かく敎えてくれる

その他のmetrics

FCP (First Contentful Paint)

First Contentful Paint marks the time at which the first text or image is painted.

FCPとは最初にtext或いは畫像が表示される迄の時閒を謂ふ

TBT (Total Blocking Time)

Sum of all time periods between FCP and Time to Interactive, when task length exceeded 50ms, expressed in milliseconds.

FCPからTTI迄の閒に50mses以上掛ったtaskの時閒の總計であり、msec單位で表される

TTI (Time to Interactive)

Time to interactive is the amount of time it takes for the page to become fully interactive.

TTI とは頁全體が完全に利用出來る樣に成る迄の時閒の總計を謂ふ

TTFB (Time to First Byte)

RAIL (Response-Amimation-Idle-Load)

Response

In < 50 msec

< 100 msec from user perspective. 100 - 50 msec is other idle tasks budget

Animation

Idle

Maximize idle time for other tasks

Load

Become interactive with slow 3G connections in < 5 sec

subsequent loads < 2 sec

道具

Sentry